body {
    background-image:
        url('https://runetranscriber.googlecode.com/svn/trunk/webapp/src/main/resources/yellowGradient.png');
    background-repeat: no-repeat;
    font-family: Arial, Verdana, Helvetica, Sans-Serif;
    font-size: medium;
}

@font-face {
    font-family: Junicode-Bold;
    src:
        url('https://runetranscriber.googlecode.com/svn/trunk/webapp/src/main/resources/Junicode-Bold.ttf');
}

@font-face {
    font-family: Angerthas;
    src:
        url('https://runetranscriber.googlecode.com/svn/trunk/webapp/src/main/resources/ANGERTH.TTF');
}

@font-face {
    font-family: Aurebesh;
    src:
        url('https://runetranscriber.googlecode.com/svn/trunk/webapp/src/main/resources/Aurebesh.ttf');
}

@font-face {
    font-family: Tengwar;
    src:
        url('https://runetranscriber.googlecode.com/svn/trunk/webapp/src/main/resources/TengwarSindarin.ttf');
}

.font-anglo-saxon {
    font-family: Junicode-Bold;
}

.font-aurebesh {
    font-family: Aurebesh;
}

.font-cirth {
    font-family: Angerthas;
}

.font-tengwar {
    font-family: Tengwar;
}

#inputArea, #outputArea {
    background-color: white;
    font-size: large;
}

#inputArea, #buttonBar, #outputArea {
    text-align: center;
    width: 100%;
}

#outputArea {
    padding-top: 20px;
    padding-bottom: 20px;
}

.left {
    text-align: left;
}

#buttonTable {
    /** These center the table. */
    margin-left: auto;
    margin-right: auto;
}

#transcribeButton {
    text-align: center;
}